<template>
  <div class="paymmented">
    <div class="paymmented-box">
      <span class="paymmented-tips"></span>
      <div class="paymmented-type">
        <span class="paymmented-tittle">小区名称</span>
        <div class="paymmented-house">
          <span v-if="message&&message.residential&&message.residential.name">{{ message.residential.name }}</span>
        </div>
      </div>
      <div class="paymmented-Prescription  paymmented-type">
        <span class="paymmented-tittle">缴费金额</span>
        <div class="paymmented-time paymmented-house">
          <span v-if='message.cost'>{{ message.cost }}元</span>
          <span v-else>暂无</span>
        </div>
      </div>
      <div class="paymmented-Prescription  paymmented-type">
        <span class="paymmented-tittle">起止时间</span>
        <div class="paymmented-time paymmented-house">
          <span v-if='message.starttime_text&&message.endtime_text'>{{ message.starttime_text }} ~ {{ message.endtime_text }}</span>
          <span v-else>暂无</span>
        </div>
      </div>
      <div class="paymmented-Prescription  paymmented-type">
        <span class="paymmented-tittle">缴费时间</span>
        <div class="paymmented-time paymmented-house">
          <span v-if='message.pay_time_text'>{{ message.pay_time_text }}</span>
          <span v-else>暂无</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: Object
    }
  },
  data() {
    return {}
  }
}
</script>

<style scoped>
.paymmented {
  margin: 0 .5rem .5rem;
}

.paymmented-box {
  border-bottom: 0.04rem solid #979797;
  padding-bottom: .5rem;
}

.paymmented-box .paymmented-tips {
  display: block;
  margin: .3rem 0;
  font-size: .32rem;
  color: #000;
}

.paymmented-type {
  text-indent: .3rem;
}

.paymmented-tittle {
  color: #57c5c6;
  height: .5rem;
  display: block;
  font-weight: bold;
}

.paymmented-house {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: .5rem;
  font-weight: bold;
}

.paymmented-Prescription {
  margin-top: .5rem;
}
</style>
